<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle> </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="monitor-trace-log" setup>
  import { ref, reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { getUserList } from './esuser.api';
  import { columns, searchFormSchema } from './esuser.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ColEx } from '/@/components/Form/src/types';

  const { createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();

  // 自适应列配置
  const adaptiveColProps: Partial<ColEx> = {
    xs: 24, // <576px
    sm: 12, // ≥576px
    md: 12, // ≥768px
    lg: 8, // ≥992px
    xl: 8, // ≥1200px
    xxl: 6, // ≥1600px
  };

  const [registerTable, { reload }] = useTable({
    rowKey: 'id',
    columns,
    api: getUserList,
    showIndexColumn: false,
    useSearchForm: true,
    bordered: true,
    showTableSetting: true,
    formConfig: {
      schemas: searchFormSchema,
      fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
      // 紧凑模式
      compact: true,
      // label默认宽度
      // labelWidth: 120,
      // 按下回车后自动提交
      autoSubmitOnEnter: true,
      // 默认 row 配置
      rowProps: { gutter: 8 },
      // 默认 col 配置
      baseColProps: {
        ...adaptiveColProps,
      },
      labelCol: {
        xs: 24,
        sm: 8,
        md: 6,
        lg: 8,
        xl: 6,
        xxl: 6,
      },
      wrapperCol: {},
      // 是否显示 展开/收起 按钮
      showAdvancedButton: true,
      // 超过指定列数默认折叠
      autoAdvancedCol: 3,
      // 操作按钮配置
      actionColOptions: {
        ...adaptiveColProps,
        style: { textAlign: 'left' },
      },
    },
    // 请求之前对参数做处理
    beforeFetch(params) {
      let key = params.queryField;
      let value = params.queryValue;
      if (key != '_all' && value) {
        value = key + ':' + value;
      }
      delete params.queryField;
      delete params.queryValue;
      params.queryStr = value;
      params.sortCol = 'timestamp';
      params.isHighlighter = true;
    },
  });
</script>
